<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">

	<head>
		<title>爱学习-课程</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500" rel="stylesheet">

		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/css/bootstrap.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/css/animate.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/css/owl.carousel.min.css">

		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/fonts/ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/fonts/fontawesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/fonts/flaticon/font/flaticon.css">

		<!-- Theme Style -->
		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/css/style.css">
		<style type="text/css">

		</style>
	</head>

	<body>

		<header role="banner" id="header" style="position: fixed;">

			<nav class="navbar navbar-expand-lg navbar-light bg-light">
				<div class="container-fluid">
					<img src="images/logo.jpg" width="109px" height="78px">
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

					<div class="collapse navbar-collapse navbar-light" id="navbarsExample05">
						<ul class="navbar-nav ">
							<li class="nav-item">
								<a class="nav-link active" href="index2.jsp">首页</a>
							</li>
							<li class="nav-item dropdown">
								<a class="nav-link dropdown-toggle" href="courses.jsp" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">课程</a>
								<div class="dropdown-menu" aria-labelledby="dropdown04" id="tabdiv">
									<!-- <a class="dropdown-item" href="courses.html">HTML</a>
									<a class="dropdown-item" href="courses.html">WordPress</a>
									<a class="dropdown-item" href="courses.html">Laravel</a>
									<a class="dropdown-item" href="courses.html">JavaScript</a>
									<a class="dropdown-item" href="courses.html">Python</a> -->
								</div>

							</li>

							<li class="nav-item">
								<a class="nav-link" href="about.jsp">关于我们</a>
							</li>

						</ul>
						<ul class="navbar-nav absolute-right" id="status1">
							<img class="rounded-circle mt-3" src="images/2.png" width="50" height="50" id="image" />
							<li class="dropdown">
								<a class="nav-link dropdown-toggle">${sessionScope.name}</a>
								<div class="dropdown-menu" aria-labelledby="dropdown05">
									<a href="PersonalCenter.jsp" class="dropdown-item">个人中心</a>
									<a href="${pageContext.request.contextPath}/AccountLoginAndLogout?op=exit" class="dropdown-item" href="#">退出登录</a>
								</div>
							</li>
						</ul>
						<ul class="navbar-nav absolute-right" id="status2">
							<li>
								<a href="login.jsp">登录</a> /
								<a href="register.jsp">注册</a>
							</li>

						</ul>
					</div>
				</div>
			</nav>
		</header>
		<!-- END header -->

		<!--<section class="site-hero overlay" data-stellar-background-ratio="0.5" style="background-image: url(images/big_image_2.jpg);">
			<div class="container">
				<div class="row align-items-center justify-content-center site-hero-inner">
					
				</div>
			</div>
		</section>-->
		<div class="mb-5 element-animate container" id="section-first">
			<div class="block-17">
				<h2 class="heading text-center p-3 text-black">查找适合您的课程</h2>
				<form action="" method="get" class="d-block d-lg-flex mb-4">
					<div class="fields d-block d-lg-flex">
						<input type="text" class="form-control" style="width: 100%;" placeholder="关键字..." id="keyword">
					</div>
					<input type="button" class="search-submit btn btn-primary" value="查找" id="search">
				</form>
				<!--<p class="text-center mb-5">我们提供500多种课程来提高您的技能</p>-->
			</div>
		</div>

		<!-- END section -->

		<div class="bg-light element-animate p-4">
			<div class="container">
				<div class="row">

					<div class="col-md-6 col-lg-8 order-md-2">
						<div class="row" id="showCourse">

						</div>

						<div class="row mb-5">
							<div class="col-md-12 text-center">
								<div class="block-27" id="showPage">
								</div>
							</div>
						</div>
					</div>
					<!-- END content -->
					<div class="col-md-6 col-lg-4 order-md-1">

						<div class="block-24 mb-5">
							<h3 class="heading">分类目录</h3>
							<ul id="TabList">
								<li>
									<a href="####">JAVA <span></span></a>
								</li>
								<li>
									<a href="####">PHP <span></span></a>
								</li>
								<li>
									<a href="####">JavaScript <span></span></a>
								</li>
								<li>
									<a href="####">Python <span></span></a>
								</li>
								<li>
									<a href="####">UI <span></span></a>
								</li>
								<li>
									<a href="####">UXD <span></span></a>
								</li>
							</ul>
						</div>

						<div class="block-25 mb-5 row" id="recentVisitDiv">
							<div class="heading">最近访问</div>
							<div class="ml-4"><button class="btn btn-info text-white" onclick="emptyHistory()">清空历史</button></div>
							<ul id="recentVisit">
								<li>
									<a href="####" class="d-flex">
										<figure class="image mr-3">
											<img src="images/zhiyesuzhi.jpg" alt="" class="img-fluid">
										</figure>
										<div class="text">
											<h3 class="heading">职业素质课</h3>
											<span class="meta">$680.0</span>
										</div>
									</a>
								</li>
								<li>
									<a href="####" class="d-flex">
										<figure class="image mr-3">
											<img src="images/yantaohui.jpg" alt="" class="img-fluid">
										</figure>
										<div class="text">
											<h3 class="heading">跨越式发展研讨会</h3>
											<span class="meta">$680.0</span>
										</div>
									</a>
								</li>
								<li>
									<a href="####" class="d-flex">
										<figure class="image mr-3">
											<img src="images/xunlianying.jpg" alt="" class="img-fluid">
										</figure>
										<div class="text">
											<h3 class="heading">大咖训练营</h3>
											<span class="meta">$1080.0</span>
										</div>
									</a>
								</li>
							</ul>
						</div>

					</div>
					<!-- END Sidebar -->
				</div>
			</div>
		</div>

		<div class="py-5 block-22">
			<div class="container">

				<h1 class="heading text-center">以虔诚的心态学习，向似锦的前程迈步</h1>

			</div>
		</div>
		<div class="modal fade" id="buyCourseModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLabel">购买课程</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
					</div>
					<div class="modal-body">
						...
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="cmtPurchase" onclick="doPurchase(this)">确认</button>
					</div>
				</div>
			</div>
		</div>
		<!-- END footer -->

		<!-- loader -->
		<div id="loader" class="show fullscreen">
			<svg class="circular" width="48px" height="48px">
				<circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee" />
				<circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#f4b214" />
			</svg>
		</div>

		<script src="${pageContext.request.contextPath}/front/js/jquery-3.2.1.min.js"></script>
		<script src="${pageContext.request.contextPath}/front/js/jquery-migrate-3.0.0.js"></script>
		<script src="${pageContext.request.contextPath}/front/js/popper.min.js"></script>
		<script src="${pageContext.request.contextPath}/front/js/bootstrap.min.js"></script>
		<script src="${pageContext.request.contextPath}/front/js/owl.carousel.min.js"></script>
		<script src="${pageContext.request.contextPath}/front/js/jquery.waypoints.min.js"></script>
		<script src="${pageContext.request.contextPath}/front/js/jquery.stellar.min.js"></script>
		<script src="${pageContext.request.contextPath}/front/js/jquery.animateNumber.min.js"></script>
		<script src="${pageContext.request.contextPath}/front/js/layer/layer.js"></script>
		<script src="${pageContext.request.contextPath}/front/js/main.js"></script>
		<script type="text/javascript" src="../WebTools/DB/tools.js"></script>
		<script type="text/javascript">
			/**
			 * 清空浏览历史
			 */
			function emptyHistory() {
				localStorage.clear();
				initRencenVisit();
			}

			/**
			 * 加载最近访问
			 */
			function initRencenVisit() {
				$('#recentVisit').empty()
				$.each(JSON.parse(localStorage.getItem('recentVisit')),
					function(index) {
						var coursePic;
						if(this.course_pic != null && this.course_pic.trim() != '') {
							coursePic = this.course_pic;
						} else {
							coursePic = "indexCoursePic.jpg";
						}
						if(index < 5) {
							var x = '<li>';
							x += '<a href="${pageContext.request.contextPath}/CourseServletForyd?op=toSingleCoursePage&courseId=' + this.course_id + '" class="d-flex">';
							x += '<figure class="image mr-3">';
							x += '<img src="${pageContext.request.contextPath}/FileDownLoadServlet?op=getCourseFace&faceName=' + coursePic + '" alt="" class="img-fluid">';
							x += '</figure>';
							x += '<div class="text">';
							x += '<h3 class="heading">' + this.course_title + '</h3>';
							x += '<span class="meta">' + this.course_price + '积分</span>';
							x += '</div>';
							x += '</a>';
							x += '</li>';
							$('#recentVisit').append(x);
						}

					});
			}
			/**
			 * 绑定mouseenter事件
			 */
			$('#recentVisitDiv').mouseenter(function() {
				initRencenVisit();
			})
			/**
			 * 入口函数
			 */
			$(document).ready(function() {

				//				$(document).on('mouseleave', '#recentVisitDiv', initRencenVisit());
				initRencenVisit();
				$('#section-first').css('margin-top', $('header').height());
				if("${sessionScope.name}" != "" && "${sessionScope.accountPic}".trim() != "") {

					$("#status1 img").attr('src', '${pageContext.request.contextPath}/FileDownLoadServlet?op=getAccountFace&faceName=${sessionScope.accountPic}');
					$("#status2").hide()
				} else if("${sessionScope.name}" != "" && "${sessionScope.accountPic}".trim() == "") {
					$("#status2").hide()
					$("#status1 img").attr('src', 'images/2.png');
				} else if("${sessionScope.name}" == "") {
					$("#status1").hide()
					$("#home").removeAttr('onclick')
				}
				//发送ajax请求
				$.ajax({
					async: true,
					url: "${pageContext.request.contextPath}/TabServlet",
					type: "GET",
					data: {
						op: "getAllTab"
					},
					dataType: "json",
					success: function(result, status, xhr) {
						//清空数据
						$('#tabdiv').empty();
						$.each(result, function(index, tab) {
							if(index < 3) {
								$('#tabdiv').append("<a class=\"dropdown-item\" href=\"courses.jsp?searchKey=" + escape(tab.tab_name) + "\">" + tab.tab_name + "</a>");
							}
						});
						$('#TabList').empty()
						$.each(result, function(index, tab) {
							if(index < 5) {
								$('#TabList').append("<li> <a href=\"courses.jsp?searchKey=" + escape(tab.tab_name) + "\">" + tab.tab_name + " <span></span></a> </li>");
							}
						});
					},
					error: function(xhr, status, error) {
						layer.msg("请求失败");
					}
				});
				//已进入页面，发送AJAX请求
				if(getQueryString('searchKey') != null) {
					$("#keyword").val(unescape(getQueryString('searchKey')));
				}
				sendAjax(1);

				//查找按钮点击事件
				$('#search').click(function() {
					sendAjax(1);
				});
				//<符号绑定点击事件
				$(document).on("click", "#leftbtn", function() {
					//获取当前页
					var currentPageNum = $('#pageul').data("pagenum");
					if(currentPageNum == 1) {

						layer.msg("已经是第一页");
					} else {
						var pageNum = parseInt(currentPageNum) - 1;
						sendAjax(pageNum);
					}
				});
				//对>符号绑定点击事件
				$(document).on("click", "#rigbtn", function() {
					//获取当前页
					var currentPageNum = $('#pageul').data("pagenum");
					//获取总页数
					var lastPageNum = $('#pageul').data("pages");
					if(currentPageNum == lastPageNum) {
						layer.msg("已经是最后一页");
					} else {
						var pageNum = parseInt(currentPageNum) + 1;
						sendAjax(pageNum);
					}
				});
				//页码点击事件
				$(document).on("click", ".current", function() {
					//获取当前页
					var pageNum = $(this).text();

					sendAjax(pageNum);

				});
			});

			//发送ajax请求
			function sendAjax(pageNum) {
				$.ajax({
					async: true,
					url: "${pageContext.request.contextPath}/CourseServletForyd",
					type: "GET",
					data: {
						op: "getCourseListByPage",
						courseTitle: $("#keyword").val(),
						pageNum: pageNum,
						pageSize: "4"
					},
					dataType: "json",
					success: function(result, status, xhr) {
						console.log(result)
						// 调用数据渲染的方法
						showData(result);
						if('${sessionScope.accountId}'.trim() != '') {
							sendIsBoughtAjax('${sessionScope.accountId}');
						}
					},
					error: function(xhr, status, error) {
						layer.msg("请求失败");
					}
				});
			}

			/**购买程序
			 * @param {Object} obj
			 */
			function doPurchase(obj) {
				//				$(obj).data('course-price');

				if('${sessionScope.accountId}'.trim() != '') {
					$.ajax({
						type: "post",
						url: "../OrderServlet",
						data: {
							'op': 'doPurchase',
							'accountId': '${sessionScope.accountId}',
							'courseId': $(obj).data('course-id'),
							'coursePrice': $(obj).data('course-price')
						},
						success: function(data) {
							if(data == 0) {
								layer.msg('您的积分不足！');
								$('#buyCourseModal').modal('hide');
							} else if(data == 1) {
								layer.msg('购买成功！');
								sendIsBoughtAjax('${sessionScope.accountId}');
								$('#buyCourseModal').modal('hide');
							} else {
								layer.msg(data);
								$('#buyCourseModal').modal('hide');
							}

						},
						error: function() {
							layer.msg("请求失败");
						}
					});
				} else {
					layer.msg('请先登录')
				}

			}
			/**加载模态框
			 * @param {Object} obj
			 */
			function buyCourse(obj) {
				$('#buyCourseModal .modal-body').empty();
				$('#buyCourseModal .modal-body').append('<h3>确认购买【' + $(obj).data('course-title') + '】吗</h3>');
				$('#buyCourseModal .modal-body').append('<h3>这将花费你' + $(obj).data('course-price') + '积分</h3>')
				$('#cmtPurchase').data('course-price', $(obj).data('course-price'));
				$('#cmtPurchase').data('course-id', $(obj).data('course-id'));
			}
			/**
			 * 检测是否购买课程
			 */
			function sendIsBoughtAjax(accountId) {

				$.each($('.price'), function() {
					//					console.log($(this).find('a').data('course-id'));
					var thiselm = this;
					$.ajax({
						type: "post",
						url: "../OrderServlet",
						async: true,
						data: {
							'op': 'isBought',
							'courseId': $(thiselm).find('a').data('course-id'),
							'accountId': accountId
						},
						success: function(data) {
							if(data == 'true') {
								$(thiselm).find('a').after('已购买');
								$(thiselm).find('a').remove();
							}
						},
						error: function() {
							layer.msg('出错了');
						}
					});

				});

			} //数据渲染的方法
			function showData(result) {
				//清空原页面
				$('#showCourse').empty();
				//清空分页信息原始数据
				$('#showPage').empty();
				$.each(result.data, function(index, course) {

					var coursePic;
					if(course.course_pic != null && course.course_pic.trim() != '') {
						coursePic = course.course_pic;
					} else {
						coursePic = "indexCoursePic.jpg";
					}
					//					console.log(course.course_introdu);
					if(course.course_introdu == null) {
						course.course_introdu = "";
						//						contentCut(toPureString(course.course_introdu), 100)
					}
					//显示内容
					$('#showCourse').append("<div class=\"col-md-12 col-lg-6 mb-5\">" +
						"<div class=\"block-19\">" +
						"<figure>" +
						"<a target='_blank' href=\"${pageContext.request.contextPath}/CourseServletForyd?op=toSingleCoursePage&courseId=" + course.course_id + "\">" +
						"<div>" +
						"<img style='width: 100%;' src=\"${pageContext.request.contextPath}/FileDownLoadServlet?op=getCourseFace&faceName=" + coursePic + "\" alt=\"Image\" class=\"img-fluid\"></div></a>" +
						"</figure>" +
						"<div class=\"text\">" +
						"<h2 class=\"heading\"><a target='_blank' href=\"${pageContext.request.contextPath}/CourseServletForyd?op=toSingleCoursePage&courseId=" + course.course_id + "\">" + course.course_title + "</a></h2>" +
						"<p class=\"course-introdu\">" + toPureString(course.course_introdu) + "</p>" +
						"<div class=\"meta d-flex align-items-center\">" +
						"<div class=\"number\">" +
						//						"<span>23/100</span>" +
						"</div>" +
						"<div class=\"price text-right\"><span><a data-toggle=\"modal\" data-course-price='" + course.course_price + "' data-target=\"#buyCourseModal\" style='color: #FFFFFF;' href='javascript:void(0)' data-course-title='" + course.course_title + "' data-course-id='" + course.course_id + "' onclick='buyCourse(this)'>" + course.course_price + "积分</a></span></div>" +
						"</div>" +
						"</div>" +
						"</div>" +
						"</div>" +
						"</div>");

				});
				var e = $('.course-introdu');
				for(i = 0; i < e.length; i++) {
					if($(e[i]).text() == '') {
						$(e[i]).text('暂无简介')
					} else {
						$(e[i]).text(contentCut($(e[i]).text(), 100))
					}
				}

				//<符号显示
				var x = "<ul data-pagenum=\"" + result.pageNum + "\" data-pages=\"" + result.pages + "\" id=\"pageul\">" +
					"<li><a href=\"javascript:void(0)\" id=\"leftbtn\">&lt;</a></li>";
				//页码显示
				for(var i = 1; i <= result.pages; i++) {
					if(i == result.pageNum) {
						x += "<li class=\"active current\" ><a href=\"javascript:void(0)\">" + i + "</a></li>";

					} else {
						x += "<li class=\"current\"><a href=\"javascript:void(0)\">" + i + "</a></li>"

					}
				}
				//>符号显示
				x += "<li><a href=\"javascript:void(0)\"id=\"rigbtn\">&gt;</a></li></ul>";

				$('#showPage').append(x);
				//				if('${sessionScope.accountId}'.trim() != '') {
				//					sendIsBoughtAjax('${sessionScope.accountId}');
				//				}
			}
		</script>

	</body>

</html>